<template>
 <div class="module-page">
   <div class="module-page-left">
    <div class="module-page-left-top">
      <div v-for="(item,index) in moudleList" :key="index" class="module-page-left-top-item">
      <img class="module-page-left-top-img" :src="item.url" alt="" srcset="">
      <div class="module-page-left-top-item-lable">{{item.lable}}</div>
      </div>
    </div>
    <div class="module-page-left-bottom">操作</div>
   </div>
   <div class="module-page-center">
    <div class="module-page-left-top">
      <div v-for="(item,index) in moudleList2" :key="index" class="module-page-left-center-item">
      <img class="module-page-left-top-img" :src="item.url" alt="" srcset="">
      <div class="module-page-left-top-item-lable">{{item.lable}}</div>
      </div>
    </div>
    <div class="module-page-left-bottom">模型编辑</div>
   </div>
   <div class="module-page-right">
     <div class="module-page-right-center"  >
        <div class="module-page-left-top">
         <img :src="m16" alt="" srcset="" class="module-page-left-top-img">
         着色
        </div>
        <div class="module-page-left-bottom"  @click="handleIsShow">
          显示样式
         <img :src="m20" alt="" srcset="" class="module-page-left-top-img20">
        </div>
        <div class="module-page-right-line" v-if="isShow" >
        <div class="module-page-right-line-left" v-for="(item,index) in moudleList3" :key="index">
         <img :src="item.url" alt="" srcset="" class="module-w-28">
         {{ item.lable }}
        </div>
        </div>
     </div>
     
     <div class="module-page-right-center"    >
        <div class="module-page-left-top">
         <img :src="m17" alt="" srcset="" class="module-page-left-top-img">
         自动提取
        </div>
        <div class="module-page-left-bottom" @click="handleIsShow1">
          BOM清单
         <img :src="m20" alt="" srcset="" class="module-page-left-top-img20">
        </div>
        <div class="module-page-right-line" v-if="isShow1"  >
        <div class="module-page-right-line-left" v-for="(item,index) in moudleList4" :key="index">
         <img :src="item.url" alt="" srcset="" class="module-w-28">
         {{ item.lable }}
        </div>
        </div>
     </div>

     <div class="module-page-right-center"     >
        <div class="module-page-left-top">
         <img :src="m18" alt="" srcset="" class="module-page-left-top-img">
         查找模型
        </div>
        <div class="module-page-left-bottom" @click="handleIsShow2">
          查找
         <img :src="m20" alt="" srcset="" class="module-page-left-top-img20">
        </div>
        <div class="module-page-right-line" v-if="isShow2">
        <div class="module-page-right-line-left" v-for="(item,index) in moudleList5" :key="index">
         <img :src="item.url" alt="" srcset="" class="module-w-28">
         <div> {{ item.lable }}</div>
        </div>
        </div>
     </div> 
    <div class="module-page-hui">
      <img :src="m19" alt="" srcset="" class="module-page-hui-img">
    </div>
   </div>
 </div>
 <div class="drawer-more">
<moduleDrawer/>
 
 
 
<div>
  
</div>
 </div>
  
</template>
<script setup lang='ts'>
import { ref  } from 'vue'
  import moduleDrawer from '@/components/modelPage/moduleDrawer.vue';
   
   
import m1 from "../../assets/img/m1.png" 
import m2 from "../../assets/img/m2.png" 
import m3 from "../../assets/img/m3.png" 
import m4 from "../../assets/img/m4.png" 
import m5 from "../../assets/img/m5.png" 
import m6 from "../../assets/img/m6.png" 

import m7 from "../../assets/img/m7.png" 
import m8 from "../../assets/img/m8.png" 
import m9 from "../../assets/img/m9.png" 
import m10 from "../../assets/img/m10.png" 
import m11 from "../../assets/img/m11.png" 
import m12 from "../../assets/img/m12.png" 
import m13 from "../../assets/img/m13.png" 
import m14 from "../../assets/img/m14.png" 
import m15 from "../../assets/img/m15.png" 
import m16 from "../../assets/img/m16.png" 
import m17 from "../../assets/img/m17.png" 
import m18 from "../../assets/img/m18.png" 
import m19 from "../../assets/img/m19.png" 
import m20 from "../../assets/img/m20.png" 


import m21 from "../../assets/img/m21.png" 
import m22 from "../../assets/img/m22.png" 
import m23 from "../../assets/img/m23.png" 
import m24 from "../../assets/img/m24.png" 
import m25 from "../../assets/img/m25.png" 
import m26 from "../../assets/img/m26.png" 
 
const moudleList = ref([
  {lable:"平移",id:0,url:m1},
  {lable:"焦点适应",id:1,url:m2},
  {lable:"缩放",id:2,url:m3},
  {lable:"旋转",id:3,url:m4},
  {lable:"自适应",id:4,url:m5},
  {lable:"画布刷新",id:5,url:m6},
])
const moudleList2 = ref([
  {lable:"撤销",id:7,url:m7},
  {lable:"外观材质",id:8,url:m8},
  {lable:"剖切",id:9,url:m9},
  {lable:"格式刷",id:10,url:m10},
  {lable:"包围盒",id:11,url:m11},
  {lable:"重做",id:12,url:m12},
  {lable:"透明度",id:13,url:m13},
  {lable:"爆炸",id:14,url:m14},
  {lable:"合模",id:15,url:m15},
])
const moudleList3=[
  {lable:"消隐",id:16,url:m21},
  {lable:"半透明",id:17,url:m22},
  {lable:"隐藏",id:18,url:m23},
  {lable:"线框",id:19,url:m24} 
]
const moudleList4=[
  {lable:"自动提取",id:16,url:m25},
  {lable:"自定义",id:161,url:m25},
    
]
const moudleList5=[
 
  {lable:"查找模型",id:17,url:m26}, 
  {lable:"参数属性",id:18,url:m26}, 
]
const isShow = ref(false);
const isShow1 = ref(false);
const isShow2 = ref(false);
 const handleIsShow =() =>{
  isShow.value = !isShow.value;
  isShow1.value=false
  isShow2.value=false
 }
 const handleIsShow1 =() =>{
  isShow1.value = !isShow1.value;
  isShow.value=false
  isShow2.value=false
 }
 const handleIsShow2 =() =>{
  isShow2.value = ! isShow2.value ;
  isShow.value=false
  isShow1.value=false
 }
 
  
</script>
<style scoped lang="scss"> 
@import url("./css/modelPage.scss");
</style>